
<div id="tms-img-rotate" ref="main" ng-show="show">
    <div class="tms-img-rotate-close" ng-click="hide()">X</div>
    <div id="tms-img-rotate-container">
        <div id="imgCon">
            <img id="img00" data-ng-src="{{src}}"/>
        </div>
        
        
    </div>
    <div class="tms-img-rotate-bar-con">
        <div class="direction_btn" ng-mouseup="cancleMove()">
            <button type="button" size="large" class="btn"  ng-mousedown="move(-1,0)" ><i class="fa fa-chevron-left"/></button>
            <button type="button" size="large" class="btn" ng-mousedown="move(0,-1)"><i class="fa fa-chevron-up"/></button>
            <button type="button" size="large" class="btn" ng-mousedown="move(0,1)"><i class="fa fa-chevron-down"/></button>
            <button type="button" size="large" class="btn" ng-mousedown="move(1,0)"><i class="fa fa-chevron-right"/></button>
        </div>
           
        <input id="ex1"  data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="360" data-slider-step="1" data-slider-value="0"/>
    </div>
</div>



<style>
    #tms-img-rotate{
        position: fixed;
        left: 0px;
        top:0px;
        /* width: 1920px;
        height: 1080px; */
        background-color: rgba(20, 20, 20, 0.2);
        z-index: 1061;

    }
    #tms-img-rotate-conrainer{
        height: 850px;
        width:100%;
        
        /* background-color: #efefef; */

    }
    #imgCon{
        width: 100%;
        height: 850px;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    #tms-img-rotate-conrainer img{
        display: block;
        position: relative !important;
        max-width: 500px !important;
        max-height: 500px !important;
        top:0px ;
        left: 0px ;
    }
    .tms-img-rotate-close{
        z-index: 1000;
        position: absolute;
        font-size: 25px;
        right: 0px;
        width: 50px;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        padding-top: 5px;
        background-color: rgba(40, 40, 40, 0.4);
        border-radius: 0px 0px 0px 40px;
        cursor: pointer;
    }
    .tms-img-rotate-bar-con{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: absolute;
        bottom:20px;

    }
    #ex1Slider{
        width: 1000px;
        
    }
    .direction_btn{
        z-index: 2000;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 10px;
        padding: 5px 10px;
    }
    
    .direction_btn button{
        margin: 0 30px;
        background-color: rgba(0, 0, 0, 0);
        
        border:0px solid rgba(0, 0, 0, 0);
       
    }
    .direction_btn button:hover{
        background-color: #fff;
    }
    .direction_btn button i{
        color: white;
        font-size: 20px;
        padding: 2px 0 0 0;
    }
    .direction_btn button:hover i{
        color: #000;
    }
  

    #ex1Slider .slider-selection{
        background:#428041;
     

    }
</style>
